<script setup>
import { computed, defineAsyncComponent, provide, ref } from 'vue';
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import { REQU, useResp } from '@/net/requ.js';
import { toClasses, xsToOpts } from '@/util/index.js';
const TaskSelector = defineAsyncComponent(() => import('./components/task-selector.vue'));

const props = defineProps(['visible']);
const emit = defineEmits(['update:visible']);

const loading = ref(false);
const taskSelectorProps = ref({ visible: false });

const columns = ref([
  {
    title: '标签',
    dataIndex: '标签',
  },
  {
    width: 100,
    title: '数量',
    dataIndex: '数量',
    sorter: (a, b) => a.数量 - b.数量,
  },
]);

const dataSource = ref([]);

const tasks = ref([]);
const ids = computed(() => R.pluck('id', tasks.value));

const filterOption = (input, opt) => opt.value.includes(input);
const classes = computed(() => (
  R.compose(
    R.uniq,
    R.unnest,
    R.map(R.compose( toClasses, R.prop('labels') )),
  )(tasks.value)
));

const excludes = ref([]);
provide('excludes', excludes);
const options = computed(() => xsToOpts(classes.value));

function send() {
  loading.value = true;

  const params = {
    taskIds: ids.value.join(','),
    undesiredLabels: excludes.value.join(','),
  };

  return REQU(`/api/task/labelPictogram?${new URLSearchParams(params)}`)
  .then(useResp({
    succ: result => {
      dataSource.value = R.compose( R.map(R.zipObj(['标签', '数量'])), R.toPairs )(result.data);
    },
  }))
  .finally(() => (loading.value = false));
}
</script>

<template>
  <a-drawer
    class="label-stats"
    title="标签统计"
    :width="1250"
    :visible="props.visible"
    @close="() => emit('update:visible', false)"
  >
    <aside>
      <a-select
        mode="multiple"
        v-model:value="excludes"
        show-search
        :options="options"
        :max-tag-count="1"
        :max-tag-text-length="6"
        :dropdown-match-select-width="false"
        :filter-option="filterOption"
        placeholder="选择不统计的标签"
        style="width: 100%;"
      >
      </a-select>
      <template v-if="0 < excludes.length">
        <ul>
          <template v-for="label in excludes">
            <li>
              <span>{{ label }}</span>
              <a-button
                type="danger"
                ghost
                @click="() => excludes.splice(excludes.indexOf(label), 1)">
                <template #icon><close-circle-outlined /></template>
              </a-button>
            </li>
          </template>
        </ul>
      </template>
      <template v-else>
        <a-empty :description="ids.length <= 0 ? '选了任务才能选标签' : '可以选择不统计的标签了'"></a-empty>
      </template>
    </aside>

    <aside>
      <a-button
        block
        @click="() => (taskSelectorProps.visible = true)">
        选择任务
      </a-button>

      <template v-if="0 < ids.length">
        <ul>
          <template
            v-for="task in tasks"
            :key="task.id">
            <li>
              <span>{{ task.taskName }}</span>
              <a-button
                type="danger"
                ghost
                @click="() => tasks.splice(tasks.indexOf(task), 1)">
                <template #icon><close-circle-outlined /></template>
              </a-button>
            </li>
          </template>
        </ul>
      </template>
      <template v-else>
        <a-empty description="请选择任务"></a-empty>
      </template>
    </aside>

    <main>
      <a-button
        type="primary"
        :disabled="!(0 < ids.length) || loading"
        style="margin-bottom: 1em;"
        @click="() => send()">
        开始统计
      </a-button>

      <a-table
        :loading="loading"
        :pagination="false"
        :columns="columns"
        :data-source="dataSource"
        :scroll="{ y: 316 }">
      </a-table>
    </main>
  </a-drawer>

  <task-selector
    v-if="taskSelectorProps.visible"
    v-model:visible="taskSelectorProps.visible"
    :tasks="tasks"
    @ok="xs => (tasks = xs)">
  </task-selector>
</template>

<style>
.label-stats .ant-drawer-body {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 324px auto;
  gap: 1em;
}

.label-stats .ant-drawer-body > main {
  grid-column: 1 / span 2;
}

.label-stats ul { list-style: none; }

.label-stats aside {
  display: flex;
  flex-direction: column;
}

.label-stats aside > .ant-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.label-stats aside > ul {
  overflow-y: auto;
}

.label-stats aside > ul > li {
  display: flex;
  gap: 1em;
  align-items: center;
  padding-top: .5em;
  padding-bottom: .5em;
  border-bottom: 1px solid rgb(228,228,228);
}

.label-stats aside > ul .ant-btn-danger {
  flex-shrink: 0;
  border: 0;
  box-shadow: none;
  margin-left: auto;
}
</style>
